<template>
  <div id="app" style="padding: 20px; background-color: #f5f5f5">
    <el-row>
      <el-col :span="12">
        <vue-draggable
          :list="list"
          draggable=".aaaaaaaaaaaa"
          :group="{ name: 'basicComponentGroup', pull: 'clone' }"
          :sort="false"
          :clone="onClone"
          @end="onEnd"
        >
          <div
            v-for="(item, itemIndex) in list"
            :key="itemIndex"
            style="background: red; margin: 10px"
            class="aaaaaaaaaaaa"
          >
            {{ item.name }}
          </div>
        </vue-draggable>
      </el-col>
      <el-col :span="12">
        <div>
          <vue-draggable
            style="border: 1px solid; height: 300px"
            :list="dragList"
            group="basicComponentGroup"
            animation="340"
          >
            我是1级拖拽面板
            <div
              v-for="(item, itemIndex) in dragList"
              :key="itemIndex"
              class="bbbbbbbb"
            >
              {{ item.name }}

              <div v-if="item.children">
                <vue-draggable
                  style="border: 1px solid; height: 100px"
                  :list="item.children"
                  group="basicComponentGroup"
                  animation="340"
                >
                  我是2级拖拽面板
                  <div
                    v-for="(item2, itemIndex2) in item.children"
                    :key="itemIndex2"
                    class="bbbbbbbb"
                  >
                    {{ item2.name }}
                  </div>
                </vue-draggable>
              </div>
            </div>
          </vue-draggable>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
// import { componentDef, basicComponents } from '@/config/components'
// import DragForm from '@/components/DragForm'
import VueDraggable from 'vuedraggable'

const list = [
  {
    componentKey: 'panel',
    componentName: '表单面板',
    itemLabel: '表单面板',
    tag: 'v-panel',
    tagType: 'PANEL',
    className: 'v-panel',
    style: {
      padding: '20px'
    },
    children: [
      {
        componentKey: 'input',
        componentName: '文本框',
        itemLabel: '文本框',
        tag: 'el-input',
        tagType: 'FORM'
      }
    ]
  }
]

export default {
  name: 'Demo',
  components: { VueDraggable },
  data () {
    return {
      list: [
        { name: '我是拖拽1' },
        { name: '我是拖拽2' },
        { name: '我是拖拽3' },
        { name: '我有children', children: [] }
      ],
      dragList: [],
      dragList2: [],
      formData: {},
      dragConfig: {
        list
      },
      formConfig: {
        formProps: {
          'label-width': '100px'
        },
        rules: {},
        elements: list
      },
      draggedContext: null
    }
  },
  methods: {
    onClone (obj) {
      const data = JSON.parse(JSON.stringify(obj))
      this.draggedContext = data
      return data
    },
    onEnd ({ form, to }) {
      if (form === to) {
        return
      }
      // this.dragList.push(this.draggedContext)
    }
  }
}
</script>
<style lang="scss">
@import "~@/styles/v-form";
</style>

